<template>
  <div>
    <!-- <el-tabs v-model="activeName">
    <el-tab-pane label="转账到余额" name="1"></el-tab-pane>
    <el-tab-pane label="转账到银行卡" name="2"></el-tab-pane>
  </el-tabs> -->
    <div class="yueTransfer">
      <el-form
        :model="form"
        ref="yueTransForm"
        label-width="100px"
        :rules="rules"
      >
        <el-form-item label="转出渠道">
          <el-select
            style="width: 130px"
            placeholder="请选择转出渠道"
            v-model="form.payformChannel"
            @change="handleChannel"
          >
            <el-option
              v-for="item of channelList"
              :key="item.channel"
              :label="item.channelName"
              :value="item.channel"
            ></el-option>
          </el-select>
          <span class="use">可用余额：{{ avlBalance }}</span>
        </el-form-item>
        <el-form-item label="转账名称" prop="goodsTitle">
          <el-input
            v-model="form.goodsTitle"
            placeholder="请输入转账名称"
            class="input_"
            maxlength="50"
          ></el-input>
        </el-form-item>
        <el-form-item label="转账描述" prop="goodsDesc">
          <el-input
            v-model="form.goodsDesc"
            placeholder="请输入转账描述"
            class="input_"
            maxlength="50"
          ></el-input>
        </el-form-item>
        <div v-if="activeName === '1'">
          <el-form-item label="收款方" prop="inMemberId">
            <el-select
              v-model="form.inMemberId"
              class="input_"
              filterable
              remote
              clearable
              placeholder="请输入商户名称或商户ID"
              :remote-method="remoteMethod"
            >
              <el-option
                v-for="item of merchantList"
                :key="item.id"
                :label="item.memberName"
                :value="item.id"
                class="height70"
              >
                <div style="color: #03bfc6">{{ item.memberName }}</div>
                <div style="color: #999999">商户ID : {{ item.memberNo }}</div>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="转账金额" prop="transAmt">
            <el-input
              v-model="form.transAmt"
              type="number"
              title=""
              placeholder="最大不超过可用余额"
              class="input_"
              style="width: 585px"
            ></el-input>
            元
          </el-form-item>
        </div>
        <div v-else>
          <el-form-item label="收款姓名" prop="money2">
            <el-input
              v-model="form.name"
              placeholder="请输入"
              class="input_"
            ></el-input>
          </el-form-item>
          <el-form-item label="银行卡号" prop="money">
            <el-input
              v-model="form.name"
              placeholder="请输入"
              class="input_"
            ></el-input>
          </el-form-item>
          <el-form-item label="所属银行" prop="money2">
            <el-select v-model="region" class="input_" placeholder="请选择区">
              <el-option label="区域一" value="shanghai"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="转账金额" prop="money">
            <el-input
              v-model="form.name"
              placeholder="请输入"
              class="input_"
            ></el-input>
          </el-form-item>
        </div>
        <el-form-item label="备注">
          <el-input
            v-model="form.remark"
            placeholder="请输入"
            class="input_"
            maxlength="300"
          ></el-input>
        </el-form-item>
        <el-form-item label="">
          <div class="submit" @click="goCode('SMS_BUSINESS_SETTLE_BALANCE_PAY')">
            提交
          </div>
        </el-form-item>
      </el-form>
    </div>
    <codeDialogVue
      codeId="10"
      :type="codeType"
      :codeDialog.sync="codeDialog"
      @codeState="codeStateFn"
    />
  </div>
</template>

<script>
import { isAmount } from "@/utils/validate";
import { getUserInfo} from "@/utils/public";
import codeDialogVue from "@/components/codeDialog.vue";
export default {
  name: "yueTransfer",
  components: {
    codeDialogVue,
  },
  data() {
    return {
      codeItem: "",
      codeType: "",
      codeDialog: false,
      activeName: "1",
      avlBalance: "",
      form: {
        payformChannel: "",
      },
      rules: {
        goodsTitle: [
          { required: true, message: "请输入转账名称", trigger: "change" },
        ],
        goodsDesc: [
          { required: true, message: "请输入转账描述", trigger: "change" },
        ],
        inMemberId: [
          {
            required: true,
            message: "请输入商户名称或商户ID",
            trigger: "change",
          },
        ],
        transAmt: [
          { required: true, message: "请输入转账金额", trigger: "change" },
          { validator: this.checkAmount, trigger: "change" },
        ],
      },
      channelList: [],
      merchantList: [],
    };
  },
  created() {
    this.$http.get("/api/merchant/settleaccount/wallet").then((res) => {
      if (res.code === "0000") {
        this.channelList = res.data.channelInfo.map((item) => ({
          ...item,
          channelName: this.CHANNEL_TYPE[item.channel],
        }));
        this.form.payformChannel = res.data.channelInfo[0].channel;
        this.avlBalance = res.data.channelInfo[0].avlBalance;
      }
    });
  },
  methods: {
    getUserInfo,
    codeStateFn(val) {
      if (val) {
        this.submit();
      }
    },
    goCode(val) {
      this.$refs.yueTransForm.validate((valid) => {
        if (valid) {
          if(getUserInfo().checkFlag){
            this.submit();
        }else{
          this.codeType = val;
          this.codeDialog = true;
        }
        }
      });
    },
    handleChannel(val) {
      this.avlBalance = this.channelList.find(
        (item) => item.channel === val
      ).avlBalance;
    },
    checkAmount(rule, value, callback) {
      if (!value) {
        callback(new Error("请输入转账金额"));
      } else if (Number(value) > Number(this.avlBalance)) {
        callback(new Error("不能大于可用余额"));
      } else if (!isAmount(value)) {
        callback(new Error("金额必须为整数或者保留两位小数"));
      } else if (value <= 0) {
        callback(new Error("金额必须大于0"));
      } else {
        callback();
      }
    },
    getMerchantList(val) {
      this.$http
        .post("/api/merchant/memberbase/getMerchantDictList", {
          memberClass: "2",
          memberName: val,
        })
        .then((res) => {
          if (res.code === "0000") {
            this.merchantList = res.data;
          }
        });
    },
    remoteMethod(query) {
      if (query !== "") {
        //console.log(query);
        this.getMerchantList(query);
      } else {
        this.merchantList = [];
      }
    },
    submit() {
      this.$http
        .post(`/api/merchant/settleBalancePay/add`, {
          ...this.form,
        })
        .then((res) => {
          if (res.code === "0000") {
            this.$message.success("转账成功！");
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.yueTransfer {
  background: #fff;
  padding: 50px 0 50px 50px;
  color: #666;
  min-width: 1200px;
  .name {
    color: #4f595f;
    font-size: 18px;
  }
  .use {
    height: 22px;
    background: #f0f0f0;
    border-radius: 2px;
    padding: 2px 10px;
    margin-left: 10px;
  }
  .changeBtn {
    width: 287px;
    height: 42px;
    background: #ffffff;
    border-radius: 6px;
    border: 1px solid #869daa;
    line-height: 42px;
    text-align: center;
    color: #869daa;
    margin-top: 20px;
    margin-bottom: 58px;
    cursor: pointer;
  }
  .input_ {
    width: 604px;
  }
}
.height70 {
  height: 70px;
}
:deep(.el-input__inner) {
  line-height: 1px !important;
}
:deep(
    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button
  ) {
  -webkit-appearance: none;
  margin: 0;
}
</style>
